<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Table Of Contents - YAML | Examples</title>
<!-- (en) Add your meta data here -->
<!-- (de) Fuegen Sie hier ihre Meta-Daten ein -->
<link href="06_layouts_advanced/css/layout_grids.css" rel="stylesheet" type="text/css"/>
<!--[if lte IE 7]>
<link href="06_layouts_advanced/css/patches/patch_grids.css" rel="stylesheet" type="text/css" />
<![endif]-->
</head>
<body>
<!-- skip link navigation -->
<ul id="skiplinks">
	<li><a class="skip" href="#nav">Skip to navigation (Press Enter).</a></li>
	<li><a class="skip" href="#content">Skip to main content (Press Enter).</a></li>
</ul>

<div class="page_margins">
  <div class="page">
    <div id="header" role="banner">
      <div id="topnav" role="contentinfo">
        <span><a href="#">Login</a> | <a href="#">Contact</a> | <a href="#">Imprint</a></span>
      </div>
      <h1>Layout examples | Layoutbeispiele</h1>
      <span>YAML &#8226; (X)HTML/CSS Framework</span>
    </div>
    <!-- begin: main navigation #nav -->
    <div id="nav" role="navigation">
      <div class="hlist">
        <ul>
          <li class="active"><strong>Table Of Contents</strong></li>
          <li><a href="01_layouts_basics/3col_standard.html">First Example</a></li>
          <li><a href="09_add-ons/styled_microformats.html">Last Example</a></li>
        </ul>
      </div>
    </div>
    <!-- end: main navigation -->
    <!-- begin: main content area #main -->
    <div id="main">
        <!-- Subtemplate: 2 Spalten mit 50/50 Teilung -->
        <div class="subcolumns">
          <div class="c62l">
            <div id="content" class="subcl" role="main">
                  <h2>YAML Layout Features</h2>
                  <h3>Basic Layout Options</h3>
          <p>All examples are based on YAML's <a href="http://www.yaml.de/en/documentation/basics/xhtml-source-code.html">standard XHTML markup</a>. All layout modifications are CSS based without any markup changes (aside from removing unused columns). For more information see chapters <a href="http://www.yaml.de/en/documentation/practice/basic-variations.html">Basic Variations</a> and <a href="http://www.yaml.de/en/documentation/practice/any-order-columns.html">Variable Order and Use of Content Columns</a>.</p>
                  <div class="subcolumns">
                    <div class="c33l">
                      <div class="subcl">
                        <!-- Inhalt linker Block -->
                        <h4>Base &amp; Typography</h4>
                        <ul>
                          <li><a href="01_layouts_basics/3col_standard.html">3col_standard</a></li>
                          <li><a href="01_layouts_basics/styling_content.html">styling_content</a></li>
                          <li><a href="01_layouts_basics/building_forms.html">building_forms</a></li>
                        <li><a href="01_layouts_basics/multicolumnar_forms.html">multicolumnar_forms </a></li>
						</ul>
                      </div>
                    </div>
                    <div class="c33l">
                      <div class="subc">
                        <!-- Inhalt linker Block -->
                        <h4>Set: 2 Columns</h4>
                        <ul>
                          <li><a href="02_layouts_2col/2col_left_13.html">2col_left_13</a></li>
                          <li><a href="02_layouts_2col/2col_left_31.html">2col_left_31</a></li>
                          <li><a href="02_layouts_2col/2col_right_13.html">2col_right_13</a></li>
                          <li><a href="02_layouts_2col/2col_right_31.html">2col_right_31</a></li>
                        </ul>
                      </div>
                    </div>
                    <div class="c33r">
                      <div class="subcr">
                        <!-- Inhalt mittlerer Block -->
                        <h4>Set: 3 Columns</h4>
                        <ul>
                          <li><a href="03_layouts_3col/3col_1-2-3.html">3col_1-2-3</a></li>
                          <li><a href="03_layouts_3col/3col_1-3-2.html">3col_1-3-2</a></li>
                          <li><a href="03_layouts_3col/3col_2-1-3.html">3col_2-1-3</a></li>
                          <li><a href="03_layouts_3col/3col_2-3-1.html">3col_2-3-1</a></li>
                          <li><a href="03_layouts_3col/3col_3-1-2.html">3col_3-1-2</a></li>
                          <li><a href="03_layouts_3col/3col_3-2-1.html">3col_3-2-1</a>                      </li>
                        </ul>
                      </div>
                    </div>
                  </div>
                  <h3>Basic Styling Options</h3>
<p>These examples show various techniques for column design and layouts with surrounding  shadows  as well as how to use the <a href="http://www.yaml.de/en/documentation/css-components/components-for-navigation.html">navigation components</a> that are included in the YAML download package. </p>
                  <div class="subcolumns">
                    <div class="c50l">
                      <div class="subcl">
                        <!-- Inhalt linker Block -->
                        <h4>04_layouts_styling</h4>
                        <ul>
                          <li><a href="04_layouts_styling/3col_column_dividers.html">3col_column_dividers</a></li>
                          <li><a href="04_layouts_styling/3col_faux_columns.html">3col_faux_columns</a></li>
                          <li><a href="04_layouts_styling/3col_liquid_faux_columns.html">3col_faux_columns [liquid]</a></li>
                          <li><a href="04_layouts_styling/3col_gfxborder.html">3col_gfxborder</a></li>
                          <li><a href="04_layouts_styling/dynamic_layout_switching.html">dynamic_layout_switching</a></li>
                        </ul>
                      </div>
                    </div>
                    <div class="c50r">
                      <div class="subcr">
                        <!-- Inhalt mittlerer Block -->
                        <h4>05_navigation</h4>
                        <ul>
                          <li><a href="05_navigation/menu_shiny_buttons.html">menu_shiny_buttons</a></li>
                          <li><a href="05_navigation/menu_sliding_door.html">menu_sliding_door</a></li>
                          <li><a href="05_navigation/menu_vertical_listnav.html">menu_vertical_listnav</a></li>
                        </ul>
                      </div>
                    </div>
                  </div>
                  <h3>Advanced Layout Options</h3>
              <p> YAML provides powerful <a href="http://www.yaml.de/en/documentation/practice/subtemplates.html">subtemplates</a> (flexible, nestable grid elements). These grids can be combined with column-based layouts or they can be used instead of any columns. </p>
                  <p>Furthermore two layout examples  demonstrate the multiple use of <code>.page_margins</code> and <code>.page</code> classes  to create these typical modern full-page layouts, where  backgrounds span over the full viewport width.</p>
                  <div class="subcolumns">
                    <div class="c50l">
                      <div class="subcl">
                        <!-- Inhalt linker Block -->
                        <h4>06_layouts_advanced                </h4>
                        <ul>
                          <li><a href="06_layouts_advanced/2col_advanced.html">2col_advanced</a></li>
                          <li><a href="06_layouts_advanced/3col_advanced.html">3col_advanced</a></li>
                          <li><a href="06_layouts_advanced/flexible_grids.html">flexible_grids</a></li>
                          <li><a href="06_layouts_advanced/flexible_grids2.html">flexible_grids2</a></li>
        
                          <li><a href="06_layouts_advanced/equal_height_boxes.html">equal_height_boxes</a></li>
                        </ul>
                      </div>
                    </div>
                    <div class="c50r">
                      <div class="subcr">
                        <!-- Inhalt mittlerer Block -->
                        <h4>07_layouts_advanced_2                </h4>
                        <ul>
                          <li><a href="07_layouts_advanced_2/fullpage_3col.html">fullpage_3col</a></li>
                          <li><a href="07_layouts_advanced_2/fullpage_grids.html">fullpage_grids</a></li>
                        </ul>
                      </div>
                    </div>
                  </div>
              <h3>Special Interest Examples &amp; Add-ons</h3>
      <p>Add-ons expand the features of the framework. They are complementary building blocks that are either independent from YAML or they're used only  for special purposes.</p>
                  <div class="subcolumns">
                    <div class="c50l">
                      <div class="subcl">
                        <!-- Inhalt linker Block -->
                        <h4>08_special_interest</h4>
                        <ul>
                          <li><a href="08_special_interest/3col_fullheight.html">3col_fullheight</a></li>
                          <li><a href="08_special_interest/minmax_js.html">using_minmax_js</a></li>
                        </ul>
                      </div>
                    </div>
                    <div class="c50r">
                      <div class="subcr">
                        <!-- Inhalt mittlerer Block -->
                        <h4>09_add-ons</h4>
                        <ul>
                          <li><a href="09_add-ons/accessible_tabs.html">accessible tabs with jQuery</a></li>
                          <li><a href="09_add-ons/rtl_support.html">&laquo;right to left&raquo; (rtl) language support</a></li>
                          <li><a href="09_add-ons/styled_microformats.html">styled microformats</a></li>
                        </ul>
                      </div>
                    </div>
              </div>

            </div>
          </div>
        
          <div class="c38r">
            <div class="subcr"  role="complementary">
                  <div class="info">
                    <h4>Development Information</h4>
                    <p>Ver. 3.3<br />
                      $Revision: 477 $<br />
                      $Date: 2010-10-03 22:21:59 +0200 (So, 03 Okt 2010) $</p>
                  </div>
                  <div class="info">
                  <h3>Quick start using YAML</h3>
                  <h4><em>&laquo;Simple Project&raquo; Template</em></h4>
                  <p>You need some  help for a quick start? Just <a href="http://www.yaml.de/en/download.html">download</a> and unpack the <em>&laquo;Simple Project&raquo; template </em> on your server or local machine. It includes a <a href="http://www.yaml.de/en/documentation/practice/general.html"><strong>ready to use</strong> folder structure</a> containing all necessary files for your first YAML-based layout.</p>
                  <p>If you're familiar with HTML &amp; CSS, you can start building your screen layout  by editing <em>basemod.css</em> &amp; <em>content.css</em> in the <em>css/screen/</em> folder.                  </p>
                  </div>
                  <div class="info">
                  <h3>YAML Builder</h3>
                  <p>The<em> YAML Builder</em> is a tool for visually creating YAML-based CSS layouts.  It allows for  the setting of basic layout characteristics like the number and  positioning of the content columns, as well as the dynamic creation of  grid-based layouts by dragging and dropping subtemplates.</p>
                  <p>The  code output (file names and  paths) of the YAML Builder is harmonized to the <em>Simple Project Template</em>, so just copy/paste all source code into your existing files. </p>
                  <p><a href="http://builder.yaml.de">Go to the YAML Buider</a></p>
                  </div>
                  <div class="info">
                  <h3>YAML Debug</h3>
                  <p><em>YAML Debug</em> is  an assistive  tool for web developers, that allows you to quickly review code quality  and semantic structure of your YAML-based layout as well as  testing it against common oversights.</p>
                  <p><a href="http://debug.yaml.de">Get the YAML Debug Bookmarklet</a></p>
                  </div>
                  <div class="info">
                  <h3>Additional Resources</h3>
                  <ul>
                    <li><a href="http://blog.yaml.de">YAML Development Blog</a></li>
                    <li><a href="http://forum.yaml.de">YAML Community Forum</a></li>
                    <li><a href="http://www.yaml.de/en/community.html">Templates &amp; Tutorials for CMS Integration</a></li>
                    </ul>
                  </div>
            </div>
          </div>
        </div> 

    </div>
    <!-- end: #main -->
    <!-- begin: #footer -->
    <div id="footer" role="contentinfo"> All layout examples are available in  the YAML download package. <br />
      <a href="http://www.yaml.de/">YAML</a> (Yet Another Multicolumn Layout) &copy; 2005 &ndash; 2009 by Dirk Jesse | <a href="http://www.highresolution.info">Highresolution.info</a> </div>
    <!-- end: #footer -->
  </div>
</div>
<!-- full skiplink functionality in webkit browsers -->
<script src="../yaml/core/js/yaml-focusfix.js" type="text/javascript"></script>
</body>
</html>
